<template>
  <div :style="styleObj">
    <v-chart :options="options" autoresize/>
  </div>
</template>

<script>

export default {
  name: "widgetRotatePieChart",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      options: {
        title: {},
        series: [
          {
            name: '最外环',
            type: 'pie',
            silent: true,
            radius: ['98%', '97%'],
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                show: false,
              },
            },
            data: [0]
          },
          {
            name: '外四环',
            type: 'pie',
            zlevel: 2,
            silent: true,
            radius: ['90%', '91%'],
            startAngle: 50,
            hoverAnimation: false,
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [0]
          },
          {
            name: '里四环',
            type: 'pie',
            zlevel: 3,
            silent: true,
            radius: ['88%', '87%'],
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [0]
          },
          {
            name: '虚线环',
            type: 'pie',
            zlevel: 4,
            silent: true,
            radius: ['84%', '83%'],
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [0]
          },
          {
            name: '三分环',
            type: 'pie',
            zlevel: 5,
            silent: true,
            radius: ['80%', '78%'],
            color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
            startAngle: 50,
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false
              },
            },
            data: [50, 20, 40]
          },
          {
            name: "外指标环",
            type: 'gauge',
            splitNumber: 30,
            min: 0,
            max: 100,
            radius: '73%', //图表尺寸
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLabel: {
              show: false
            },
            pointer: {
              show: 0,
            },
            detail: {
              show: 0,
            },
          },
          {
            name: '里指标环',
            type: 'gauge',
            splitNumber: 30,
            min: 0,
            max: 100,
            radius: '68%',
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLabel: {
              show: false
            },
            pointer: {
              show: 0,
            },
            detail: {
              show: false,
            },
          },
          {
            name: '环外环',
            type: 'pie',
            zlevel: 20,
            silent: true,
            radius: ['60%', '59%'],
            hoverAnimation: false,
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
          },
          {
            name: '中间环形图',
            type: 'pie',
            radius: ['40%', '55%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: '#80ADD2',
                borderColor: '#3D4268',
              }
            },
            label: {
              normal: {
                show: false,
                position: 'center',

              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              25, 25, 25, 25, 25, 25
            ]
          },
        ]
      },
      optionsStyle: {}, // 样式
      optionsCollapse: {}, // 图标属性
      optionsSetup: {}
    }
  },
  computed: {
    styleObj() {
      return {
        position: this.ispreview ? "absolute" : "static",
        width: this.optionsStyle.width + "px",
        height: this.optionsStyle.height + "px",
        left: this.optionsStyle.left + "px",
        top: this.optionsStyle.top + "px",
        background: this.optionsSetup.background
      };
    }
  },
  watch: {
    value: {
      handler(val) {
        this.optionsStyle = val.position;
        this.optionsData = val.data;
        this.optionsCollapse = val.setup;
        this.optionsSetup = val.setup;
        this.editorOptions();
      },
      deep: true
    }
  },
  mounted() {
    this.optionsStyle = this.value.position;
    this.optionsData = this.value.data;
    this.optionsCollapse = this.value.setup;
    this.optionsSetup = this.value.setup;
    this.editorOptions();
  },
  methods: {
    editorOptions() {
      this.setOptionsLastRing();
      this.setOptionsEightRing();
      this.setOptionsDottedRing();
      this.setOptionsThreeRing();
      this.setOptionsOutRing();
      this.setOptionsInRing();
      this.setOptionsRingOnRing();
      this.setOptionsPie();
    },
    // 颜色设置
    setColor(color) {
      const nullColor = 'rgba(0,0,0,0)'
      if (color == "") {
        color = nullColor
      }
      return color
    },
    // 最外外环1
    setOptionsLastRing() {
      const optionsSetup = this.optionsSetup;
      const series = this.options.series[0];
      if (optionsSetup.isLastRingShow) {
        series.data = [0]
      } else {
        series.data = ''
      }
      const normal = {
        color: {
          colorStops: [
            {
              offset: 0,
              color: this.setColor(optionsSetup.lastRing0Color),
            },
            {
              offset: 1,
              color: this.setColor(optionsSetup.lastRing100Color),
            },
          ],
        },
      };
      series.itemStyle['normal'] = normal;
    },
    setRingPie2() {
      const optionsSetup = this.optionsSetup;
      let dataArr = [];
      for (let i = 0; i < 8; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: this.setColor(optionsSetup.eightColor),
                borderWidth: 0,
                borderColor: 'rgba(0,0,0,0)'
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)'
              }
            }
          })
        }
      }
      return dataArr
    },
    // 八分环
    setOptionsEightRing() {
      const series = this.options.series;
      series[1].data = this.setRingPie2();
      series[2].data = this.setRingPie2();
    },
    setRingPie3() {
      const optionsSetup = this.optionsSetup;
      let dataArr = [];
      for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: this.setColor(optionsSetup.dottedColor),
                borderWidth: 0,
                borderColor: 'rgba(0,0,0,0)'
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
              }
            }
          })
        }
      }
      return dataArr
    },
    // 虚线环
    setOptionsDottedRing() {
      const series = this.options.series;
      series[3].data = this.setRingPie3()
    },
    // 三分环
    setOptionsThreeRing() {
      const optionsSetup = this.optionsSetup;
      const series = this.options.series[4];
      series.color = [this.setColor(optionsSetup.three1Color), this.setColor(optionsSetup.three2Color), this.setColor(optionsSetup.three3Color)]
    },
    // 外指标环
    setOptionsOutRing() {
      const optionsSetup = this.optionsSetup;
      const series = this.options.series;
      const axisLine = {
        show: optionsSetup.isOutRingShow,
        lineStyle: {
          width: optionsSetup.outRingWidth,
          shadowBlur: 0,
          color: [
            [1, this.setColor(optionsSetup.outRingColor)]
          ]
        }
      };
      const axisTick = {
        show: optionsSetup.isOutTickShow,
        lineStyle: {
          color: this.setColor(optionsSetup.outTickColor),
          width: optionsSetup.outTickWidth
        },
        length: optionsSetup.outTickLength,
        splitNumber: optionsSetup.outTickWidth
      };
      series[5].splitNumber = optionsSetup.outSplitNum
      const splitLine = {
        show: optionsSetup.isOutSplitShow,
        length: optionsSetup.outSplitLength,
        lineStyle: {
          color: this.setColor(optionsSetup.outSplitColor),
          width: optionsSetup.outSplitWidth,
        }
      };
      series[5].axisLine = axisLine
      series[5].axisTick = axisTick
      series[5].splitLine = splitLine
    },
    // 里指标环
    setOptionsInRing() {
      const optionsSetup = this.optionsSetup;
      const series = this.options.series;
      const axisLine = {
        show: optionsSetup.isInRingShow,
        lineStyle: {
          width: optionsSetup.inRingWidth,
          shadowBlur: 0,
          color: [
            [1, this.setColor(optionsSetup.inRingColor)],
          ],
        },
      };
      const axisTick = {
        show: optionsSetup.isInTickShow,
        lineStyle: {
          color: this.setColor(optionsSetup.inTickColor),
          width: optionsSetup.inTickWidth,
        },
        length: optionsSetup.inTickLength,
        splitNumber: optionsSetup.inTickNum,
      };
      series[6].splitNumber = optionsSetup.inSplitNum
      const splitLine = {
        show: optionsSetup.isInSplitShow,
        length: optionsSetup.inSplitLength,
        lineStyle: {
          color: this.setColor(optionsSetup.inSplitColor),
          width: optionsSetup.inSplitWidth
        }
      };
      series[6].axisLine = axisLine
      series[6].axisTick = axisTick
      series[6].splitLine = splitLine
    },
    // 环外环设置
    setOptionsRingOnRing() {
      const optionsSetup = this.optionsSetup;
      const series = this.options.series[7];
      if (optionsSetup.isRingOnRingShow) {
        series.data = [0]
      } else {
        series.data = ''
      }
      const itemStyle = {
        normal: {
          color: this.setColor(optionsSetup.ringOnRingColor),
        }
      }
      series.itemStyle = itemStyle
    },
    // 中饼图设置
    setOptionsPie() {
      const optionsSetup = this.optionsSetup;
      const series = this.options.series[8];
      let width = optionsSetup.pieWidth
      const pieWidth = width + "%"
      series.radius = [pieWidth, '55%']

      let pieBlocks = optionsSetup.pieBlocks
      if (pieBlocks == "six") {
        series.data = [25, 25, 25, 25, 25, 25]
      } else if (pieBlocks == "five") {
        series.data = [30, 30, 30, 30, 30]
      } else {
        series.data = [40, 40, 40, 40]
      }
      const itemStyle = {
        normal: {
          color: this.setColor(optionsSetup.pieColor),
          borderColor: this.setColor(optionsSetup.pieBorderColor),
        }
      }
      series.itemStyle = itemStyle
    }
  }
}
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
